<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box">box</div>
  <script>
    var oBox = document.querySelector('#box')
    // 绑定DOM0级对于添加事件的方式
    // 一个元素的同类型事件只能绑定一个，如果多次绑定后面的覆盖前面的
    // oBox.onclick = function () {
    //   console.log('box2')
    // }
    // oBox.onclick = function () {
    //   console.log('box0')
    // }

    // 监听DOM2级对于事件的处理
    // 可以给一个元素监听多个同类型事件，他们都会触发
    // 先监听，先执行
    // 开发中一般都用监听
    oBox.addEventListener('click', function () {
      console.log('box1')
    })
    oBox.addEventListener('click', function () {
      console.log('box2')
    })

  </script>
</body>
</html>